<template>
    <login-page>
        <transition enter-active-class="animate__animated animate__bounceInDown" appear>


            <div class="border form-box p-20  ">
                <ul class="flex justify-between items-end">
                    <li class="font-bold ml-6 flex text-3xl">欢迎登陆</li>
                    <li>
                        <router-link :to="{ name: 'Login' }" class="text-[#60a5fa]  underline">登陆</router-link>
                    </li>

                </ul>
                <el-form class="regist-form flex-1 mt-15 " :model="customInfoData" ref="formEl"
                    :rules="customInfoDataRules">
                    <el-form-item label="用户姓名" prop="custom_realName" class="label-text">
                        <el-input placeholder="请输入用户姓名" class="el-input__inner"
                            v-model="customInfoData.custom_realName" />
                    </el-form-item>

                    <el-form-item label="登陆密码" prop="custom_pwd" class="label-text">
                        <el-input placeholder="请输入密码" class="el-input__inner" v-model="customInfoData.custom_pwd" />
                    </el-form-item>
                    <el-form-item label="确认密码" prop="confirm_pwd" class="label-text">
                        <el-input placeholder="请输入确认密码" class="el-input__inner" v-model="customInfoData.confirm_pwd" />
                    </el-form-item>
                    <el-form-item label="手机号码" prop="custom_tel" class="label-text">
                        <el-input placeholder="请输入手机号码" class="el-input__inner" v-model="customInfoData.custom_tel" />
                    </el-form-item>
                    <el-form-item label="电子邮箱" prop="custom_email" class="label-text">
                        <el-input placeholder="请输入电子邮箱" class="el-input__inner" v-model="customInfoData.custom_email" />
                    </el-form-item>
                    <el-form-item label="用户性别" class="flex justify-center items-center" prop="custom_sex">
                        <el-radio-group class="ml-4" v-model="customInfoData.custom_sex">
                            <el-radio label="男" size="large">男</el-radio>
                            <el-radio label="女" size="large">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="用户地址" class="label-text" prop="custom_addr">
                        <el-input placeholder="请输入用户地址,例：北京市 北京城区 西城区" class="el-input__inner"
                            v-model="customInfoData.custom_addr" />
                        <!-- <el-cascader :props="area_info_props" style="width: 100%" separator=" " placeholder="点击选择地址"
                        v-model="customInfoData.custom_addr">
                    </el-cascader> -->
                    </el-form-item>
                    <el-form-item label="用户生日" prop="custom_birthday">
                        <div class="demo-date-picker">
                            <el-date-picker v-model="customInfoData.custom_birthday" type="date" placeholder="用户生日"
                                format="YYYY/MM/DD" value-format="YYYY-MM-DD" class="el-input__inner">
                                <template #default="cell">
                                    <div class="cell" :class="{ current: cell.isCurrent }">
                                        <span class="text">{{ cell.text }}</span>

                                    </div>
                                </template>
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item label='用户头像' class="user-photo">
                        <el-upload class="upload-demo w-[260px]  h-[160px] mt-[40px] flex justify-center items-center"
                            drag :action="baseURL + '/customInfo/uploadCustomPhoto'" name="custom_photo" multiple
                            :before-upload="beforeUpload" :show-file-list="false"
                            :header="{ easybuy_client_token: store.token }" :on-success="uploadSuccess">
                            <el-icon class="el-icon--upload">
                                <upload-filled v-if="!customInfoData.custom_photo" />
                            </el-icon>
                            <el-image class="custom_photo" :src="baseURL + customInfoData.custom_photo"
                                v-if="customInfoData.custom_photo" fit="contain" lazy />
                            <div class="el-upload__text" v-if="!customInfoData.custom_photo">
                                拖入图片 或 点击选择图片上传,不超过5M
                            </div>

                        </el-upload>
                    </el-form-item>
                    <el-form-item class="w-full h-[40px] btn-box mt-[50px] ">
                        <el-button type="primary" class="w-full btn-regist " @click="submitForm" :loading="isSubmiting"
                            :loading-icon="Loading">注册</el-button>
                    </el-form-item>
                </el-form>


            </div>
        </transition>
    </login-page>


</template>

<script setup>
import { ref, inject, reactive } from 'vue'
import { UploadFilled, Loading } from '@element-plus/icons-vue';
import API from "../utils/API";
import { ElNotification } from "element-plus";
import { mainStore } from "../store/index.js";
import { useRouter } from "vue-router"
const baseURL = inject('baseURL');
const store = mainStore();
//本地时间
const router = useRouter();
let localTime = new Date();
localTime.toLocaleDateString();
const value = ref(localTime.toLocaleDateString());
const customInfoData = ref({
    custom_realName: "张三", custom_pwd: "12345", custom_tel: "13877773510", custom_email: "3432@qq.com",
    custom_sex: "男", custom_birthday: "", custom_addr: "河北省 秦皇岛 抚宁市", custom_photo: "", confirm_pwd: "12345"
});


customInfoData.value.custom_birthday = value.value;
//表单验证的规则qq.com
const customInfoDataRules = {
    custom_realName: [{ required: true, message: "用户姓名不能为空", trigger: "blur" }],
    custom_pwd: [{ required: true, message: "登陆密码不能为空", trigger: "blur" }, {

    }],
    confirm_pwd: [{ required: true, message: "确认密码不能为空", trigger: "blur" }, {
        validator: (rule, value, callback) => {


            if (value === customInfoData.value.custom_pwd) {
                callback();
            }
            else {
                ElNotification({
                    type: "error",
                    title: "错误",
                    message: "密码不一致"
                });
            }
        }, trigger: "blur"
    }],
    custom_tel: [{ required: true, message: "手机号码不能为空", trigger: "blur" },
    {
        validator: async (rule, value, callback) => {
            if (value.length === 11 && /^1[3-9]\d{9}$/.test(value)) {
                let { data } = await API.customInfo.validateCustomTelExists(value);
                if (data === true) {
                    callback(new Error("手机号已存在"));
                } else {
                    callback()
                }
            } else {

                ElNotification({
                    type: "error",
                    title: "错误",
                    message: "手机号格式不对"
                });
            }
        }, trigger: "blur"
    }],
    custom_email: [{ required: true, message: "电子邮箱不能为空", trigger: "blur" },
    {
        validator: async (rule, value, callback) => {
            const reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
            if (reg.test(value)) {
                let { data } = await API.customInfo.validateCustomEmailExists(value);
                if (data === true) {
                    callback(new Error("邮箱已存在"));
                } else {
                    callback()
                }
            } else {
                callback(new Error("邮箱格式不正确"));
            }
        }, trigger: "blur"
    }],
    custom_sex: [{ required: true, message: "性别不能为空", trigger: "blur" }],
    custom_birthday: [{ required: true, message: "生日不能为空", trigger: "blur" }],
    custom_addr: [{ required: true, message: "地址不能为空", trigger: "blur" }],
    custom_photo: [{ required: true, message: "用户头像不能为空", trigger: "blur" }],
}
//开始上传图片之前的操作
const isUploadingImg = ref(false);
const beforeUpload = (rawFile) => {
    let reg = /^image\/(jpe?g|png|webp|gif|bmp)$/;
    if (reg.test(rawFile.type)) {
        //说明是个图片
        if (rawFile.size / 1024 / 1024 > 5) {
            //说明图片大于5M
            ElNotification({
                type: "error",
                title: "错误",
                message: "图片的大小不能大于5M"
            });
            return false;
        } else {
            //开始上传了
            isUploadingImg.value = true;
        }
    } else {
        //说明不是一个图片
        ElNotification({
            type: "error",
            title: "错误",
            message: "请选择图片文件，图片格式必须是jpg,jpeg,png,webp,gif,bmp格式"
        });
        return false;
    }
}
//获取地址数据
const area_info_props = {
    lazy: true,
    async lazyLoad(node, resolve) {
        let { level, data } = node;
        let parentId = data.id ? data.id : -1;
        let results = await API.area.getListByParentId(parentId);
        console.log(results);
        const nodes = results.map((item) => {
            return {
                value: item.areaName,
                label: item.areaName,
                id: item.id,
                leaf: level >= 2,
            };
        });
        resolve(nodes);
    },
};


//用户上传图片
const uploadSuccess = (result) => {

    console.log(result.data);
    customInfoData.value.custom_photo = result.data;
    isUploadingImg.value = false;
    console.log(customInfoData.value.custom_photo);
}

//提交数据
const isSubmiting = ref(false);
const register = () => {
    isSubmiting.value = true;
    API.customInfo.register(customInfoData.value)
        .then(result => {
            console.log(result);
            ElNotification({
                type: "success",
                title: "提示",
                message: "注册成功"
            });
            router.replace({ name: "Login" });

        })
        .catch(error => {
            ElNotification({
                type: "danger",
                title: "失败了",
                message: "注册，请重试或联系管理员"
            });
            console.log(error);
        })
        .finally(() => {
            isSubmiting.value = false;
        })
}

//提交表单
const formEl = ref(null);
const submitForm = () => {
    //验证表单的数据是否合格
    // console.log(formEl.value)
    formEl.value.validate(valid => {
        //这个valid就是验证的结果
        if (valid) {
            //表单验证成功，我们要提交数据
            if (customInfoData.confirm_pwd === customInfoData.custom_pwd) {
                register();
            }
            else {
                ElNotification({
                    type: "warning",
                    title: "提示",
                    message: "登陆密码与确认密码不相同，请填写正确的表单内容"
                })
            }

        } else {
            ElNotification({
                type: "warning",
                title: "提示",
                message: "请正确的填写表单的内容"
            })
        }
    });
}



</script>

<style lang="scss" scoped>
.regist-form {
    @apply w-[700px] h-[800px]
}

.form-box {
    box-shadow: 0 0 25px 10px gray;
}

.cell {
    height: 30px;
    padding: 3px 0;
    box-sizing: border-box;
}

.cell .text {
    width: 24px;
    height: 24px;
    display: block;
    margin: 0 auto;
    line-height: 24px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
}

.cell.current .text {
    background: #626aef;
    color: #fff;
}

.custom_photo {
    width: 130px;
    height: 100px;
}

.cell .holiday {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--el-color-danger);
    border-radius: 50%;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
}

.user-photo {
    margin-bottom: 30px;
}

.btn-box {
    margin-top: 50px;

    .btn-regist {
        height: 50px;
        font-size: 20px;
    }
}

// 输入框大小
.el-input__inner {
    height: 50px !important;
}

.label-text {
    font-size: 20px;
    display: flex;
    align-items: center;
}
</style>


